<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        #header{
            position: relative;
            top: -20px;
        }

        body{
            background-color: #e8e8e8;
            background-image: url("bj.jpg");
            width: 100%;
            height: 100%;

        }



        #div-2{

            overflow: hidden;
             margin-right: 300px;
        }
        #span-1{
            display: block;
            float: right;
        }


        #top_txt_2{
            color: #222222;

        }
        #top_txt{
            width: 353px;
            height: 34px;
            color: #feac00;


        }
        .txt-1{
            font-weight: 400;
            color: #555;
            margin: 0 auto;
        }

        .span-1{
            text-align: center;
            float:left;
            margin: 100px;

        }
        #div-3{
            margin-left: 150px;
            width: 100%;
            height: 100px;
            display: inline-block;
        }


        .img-1{
            width: 250px;
            height: 300px;

        }
        .span-2{
            float: left;
            margin-left: 50px;
        }
        #div-4{
            position: relative;
            top: 100px;
            margin-left: 200px;
            width: 100%;
            height: 500px;

        }
        input{
            width: 180px;
            height: 50px;
            background-color: #feac00;
            border-radius: 5px;
            border: #DC143C;
            color: black;
            font-size: 25px;
        }

       #id-1{
           color: #DC143C;
       }

        .div-5{
           width: 100px;
           height: 133px;
            /*margin-top: 30px;*/
            position: absolute;

        }
       #p1{
           margin:50px ;
       }
        #div-5{
            position: relative;
            margin: 0;
        }
        #input01{
            width: 150px;
            height: 50px;
        }
        #h1{
            margin-left: 580px;
            margin-top: 30px;
            margin-bottom: 0px;
        }
        #块儿{
            font-size: 24px;
            background-color: #bfbfbf;
          /*  margin-left: 380px;*/
        }
        .块儿1{
            background-color: #bf36b9;
        }

    </style>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
</head>
<body>
<div id="header">
    <img class="i1" src="../jp/捕获1.PNG" alt="">
    <div id="logo">
        <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
        </a>

        </h1>
    </div>
    <div id="login_reg">
        <a  href="#" @click.prevent="fn1()">退出</a>
    </div>
</div>
<div id="big">
<div id="div-1">
    <h1 id="top_txt">他人的时尚
    <span id="top_txt_2">与你何干!</span></h1>
    <p class="txt-1"> <p></p>时尚是什么?不同的人会给你不同的答案!他们会告诉你,是妖娆,是妩媚,是性感,是冷酷........</p>
    <p>烦么?这么多的答案,这么多的废话,这么多的模棱两可!</p>
    <p>但是!我们会告诉你最标准的答案!</p>
    <p>时尚就是最好的你,是生来就为了出众的你!</p>
    </p>
    <br>
    <input type="button" value="通往时尚~" id="input-01">
</div>
<br>

<div id="div-2">
    <img src="http://demo.mxyhn.xyz:8020/cssthemes6/skk-0603-29/images/ab.jpg" alt="" id="img01">
    <span id="span-1">
   <h1 id="id-1">我们助你玩转时尚~</h1>
        <br>
        <p>在一个重要节点的小小改变 足以产生翻天覆地的变化!</p>
        <p>要绝无仅有就必须时刻与众不同!</p>
        <br>
        <p> 时尚也许会变迁 但是风格会永恒 我们要做的就是找到你的风格!</p>
        <p> 那时 山高你为峰 你就是聚光灯的宠儿!</p>

   <input type="button" value="张扬你的风格~">
    </span>
</div>
    <p id="p1"><input type="button"value="你也可以~~" id="input01"></p>
    <hr>
<br>
<br>
<br>
<br>

<div id="div-5">
    <img src="lun01.jpg" alt="" class="div-5">
    <img src="lun02.jpg" alt="" class="div-5">
    <img src="lun03.jpg" alt="" class="div-5">
    <img src="lun04.jpg" alt="" class="div-5">
    <img src="lun05.jpg" alt="" class="div-5">
    <img src="lun06.jpg" alt="" class="div-5">
    <img src="lun07.jpg" alt="" class="div-5">
    <img src="lun08.jpg" alt="" class="div-5">
    <img src="009.jpg"   alt="" class="div-5">
</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <h1 id="h1"><b>FASHION TREND</b></h1>
    <div id="块儿">
        <input type="button" value="护肤前沿" class="块儿1">
        <input type="button" value="潮流彩妆" class="块儿1">
        <input type="button" value="美发美体" class="块儿1">
        <input type="button" value="独家策划" class="块儿1">
<!--        <span>护肤前沿</span>-->
<!--        <span>潮流彩妆</span>-->
<!--        <span>美发美体</span>-->
<!--        <span>型男志</span>-->
<!--        <span>独家策划</span>-->
<!--        <span>妆品库</span>-->
    </div>
<div id="div-4">
<span class="span-2">
    <img src="01.jpg" alt="" class="img-1">
    <p>漂浮的D'L漂浮莳萝</p>
    <p>宫村博树</p>
    <p>浮游首席执行官 <br>
    2000年4月在海上成立 <br>
    Salonwork自成立以来<br>
    一直提出一种让女性<br>
    心动的风格，其座右铭是<br>
    一定要让女性美丽!<br>
    他还活跃于一般杂志<br>
    CM 电视 海报和商业杂志<br>
    受到众多才艺模特的高度信任并受 <br>
    托负责所有公共
        和私人的发型和化妆<br>
    同样在美容行业，他广泛活跃于贸易杂志 <br>
     研讨会、美发展等.... <br>
    </p>
</span>
<span class="span-2">
    <img src="02.jpg" alt="" class="img-1">
    <p>拉尔你锦系町
拉鲁尤</p>
    <p>掌握
大师★★★★</p>
    <p>2019年Victoria's Secret <br>
     发布会发型总监 <br>
    Lall You Hair Creator<br>
    我将从美丽的帮助之心进行治疗 <br>
    AFLOAT组没有很高的门槛 <br>
    所以任何人都可以随意来。<br>
    无论年龄大小 从根源创造自然 <br>
    体积的风格都很受欢迎 <br>
    我的款式得到了很多客户的青睐 <br>
    此外，如果您能传达一些细微差别，我们将尽 <br>
        最大努力通过仔细的咨询来捕捉您的形象。
        </p>
</span>
<span class="span-2">
    <img src="03.jpg" alt="" class="img-1">
    <p>AFLOAT JAPAN 执行董事</p>
    <p>矢崎健</p>
    <p>2008-2021世界模特大赛评委 <br>
    我擅长烫发 <br>
    我们会提出最适合你 <br>
        的发质和骨架的款式 <br>
    如果您有任何问题可以向我们咨询 <br>
        我将不胜感激<br>
   希望您能在一个月、半年、一年等后 <br>
   与我们讨论头发问题 我们还将就头发设计 <br>
   头发护理，老化护理等各种事物 <br>
    提出最新建议和对应! <br>
        我们在Afloat Dill等您
    </p>
</span>
</div>

<div id="div-3">
    <span class="span-1">
        <input type="button" value="APP下载"> <br>
        为了您的数据私密 <br>请不要使用APP商店下载</span>

    <span class="span-1">
        <input type="button" value="会员充值"> <br>
        夏季活动 充一千元 <br>反二十元 福利多多进店了解</span>

    <span class="span-1">
        <input type="button" value="合作伙伴"> <br>
        百年老店 品质保证 <br> 携手向前 共创明天</span>
</div>
<br>
<div>
    <div id="footer">
        <div class="foot_t">
            <div id="zuo_boby">
                <h2 id="ft_title">A.S Hair Salon</h2>
                <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                    Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
                </p>
                <h3>Trusted by<span style="color: orange">500+ People</span></h3>
                <img src="jp/微信.webp" alt="" class="tubiao">
                <img src="jp/qq.webp" alt="" class="tubiao">
            </div>
        </div>
        <div class="foot_t">
            <div id="mid_boby">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="" class="lianjie">>>&nbspHome</a></li>
                    <li><a href="" class="lianjie">>>&nbspAbout Us</a></li>
                    <li><a href="" class="lianjie">>>&nbspSingle Page</a></li>
                    <li><a href="" class="lianjie">>>&nbspTeam</a></li>
                    <li><a href="" class="lianjie">>>&nbspContact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="foot_t">
            <div id="you_boby">
                <h4>Contact Info</h4>
                <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
                <p id="id2">电话:+1(12) 123 456 789</p>
                <p id="id3">座机:+1(12) 123 456 789</p>
                <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
            </div>
        </div>
    </div>
<script>
    $("img").each(function (i) {
        $(this).css("left",i*200+"px")
    })
    function change(){
        let timer = setInterval(function () {
            $("img").each(function () {
                let left = parseInt($(this).css("left"))
                left-=2;
                if (left<=-200){
                    left = 800*2
                    clearInterval(timer)
                }
                $(this).css("left",left+"px")
            })
        },10)
    }
    setInterval(change,5000);



</script>
</div>

</div>
</body>
<script src="../js/header.js"></script>
</html>